<template>

  <div>
    <Layout>
      <Content class="layout-content">

        <Row>
          <Col span="24">
            <Tabs type="card" value="activeEnv" @on-click="addTab()">
              <TabPane v-for="env in envList" :label="env.label" :name="env.name"
                       :v-if="env.enabled"
              >
                <template slot="label">
                  sdfsdfdsfsdf
                </template>
              </TabPane>
            </Tabs>
          </Col>
        </Row>
      </Content>
    </Layout>

  </div>


</template>
<script setup>
import {onMounted, ref, toRaw, inject, getCurrentInstance, compile, resolveComponent} from "vue";


const envList = ref([]);
const activeEnv = ref()
const addTab = () => {
  alert(activeEnv.value)
  if (env.name == "+") {
    addEmpty("empty", "empty");
  }

}

const handleTabRemove = (name) => {
  this['tab' + name] = false;
}

const firstCheck = () => {

  if (envList.value.length <= 0) {
    addEmpty("+", "+");
  }
}
const addEmpty = (label, name) => {
  envList.value.push({
    label: label,
    name: name,
    enabled: true
  })
}
onMounted(() => {
  firstCheck();
})

</script>
<style scoped>
</style>